<template>
  <div class="pieChart"
       :style="{float: 'left', height:property.height + 'px', width:property.width + 'px', padding: selfProps.paddingValue + 'px',position:'relative'}">
    <div class="mainPanned" :style="{width:selfProps.act_width + 'px', height:selfProps.act_height + 'px'}">
      <div class="chartBackgroundCustom">
        <div class="chartMainPannel" :style="{height:selfProps.act_height - selfProps.bottomLeftHeight + 'px'}"></div>
        <div class="chartDiamondBottom" :style="{height:selfProps.bottomLeftHeight + 'px'}">
          <div class="chartDiamondBottomPannel"
               :style="{width:selfProps.act_width - selfProps.bottomLeftHeight + 'px', height:selfProps.bottomLeftHeight + 'px'}"></div>
          <div class="chartDiamondBottomDiamond" :style="{height:selfProps.bottomLeftHeight + 'px'}"></div>
        </div>
        <div class="borderLeft" :style="{height:selfProps.act_height - selfProps.bottomLeftHeight + 'px'}"></div>
        <div class="borderTop" :style="{width:selfProps.act_width + 'px'}"></div>
        <div class="borderRight" :style="{height:selfProps.act_height + 'px'}"></div>
        <div class="borderBottom" :style="{width:selfProps.act_width - selfProps.bottomLeftHeight + 'px'}"></div>
        <div class="frameBorderBottom"></div>
      </div>

      <div class="piePannel"
           :style="{width:selfProps.act_width + 'px', height:selfProps.act_height + 'px', padding: selfProps.paddingValue + 'px'}">
        <div class="topPiePannel">
          <div class="pieHeader"
               :style="{width:selfProps.cnt_width + 'px'}">
            <span class="title">全疆货运中心到发车数占比</span>
          </div>
          <!--<div class="pieRadio">
            <RadioGroup v-model="pieData.top.radioVal" type="button" size="small"
                        @on-change="radioChanged('pie', 'top')">
              <Radio label="到达"></Radio>
              <Radio label="发出"></Radio>
            </RadioGroup>
          </div>-->
          <br/>
          <div class="pieChartDraw"
               :style="{width:selfProps.cnt_width + 'px', height:selfProps.act_height / 2 - 76 + 'px'}">
            <div id="topPieChart" class="pieDrawed"></div>
          </div>
        </div>
        <div class="bottomPiePannel">
          <div class="pieHeader"
               :style="{width:selfProps.cnt_width + 'px'}">
            <span class="title">全疆货运中心到发货量占比</span>
          </div>
          <!--<div class="pieRadio">
            <RadioGroup v-model="pieData.btm.radioVal" type="button" size="small"
                        @on-change="radioChanged('pie', 'btm')">
              <Radio label="到达"></Radio>
              <Radio label="发出"></Radio>
            </RadioGroup>
          </div>-->
          <br/>
          <div class="pieChartDraw"
               :style="{width:selfProps.cnt_width + 'px', height:selfProps.act_height / 2 - 76 + 'px'}">
            <div id="bottomPieChart" class="pieDrawed"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: 'pieChart',
    props: {
      property: {},
      pieData: {}
    },
    data () {
      let selfProps = {
        paddingValue: 20,
        bottomLeftHeight: 30,
        act_width: 0,
        act_height: 0,
        cnt_width: 0,
        cnt_height: 0
      }
      return {
        selfProps
      }
    },
    methods: {
      initChart (chartId, data, title) {
        let toChart = echarts.init(document.getElementById(chartId), 'light', {
          renderer: 'canvas'
        })
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          calculable: true,
          series: [
            {
              name: title,
              type: 'pie',
              center: ['50%', '50%'],
              data: data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        if (option && typeof option === 'object') {
          toChart.setOption(option, true)
        }
      },
      radioChanged (chartType, position) {
        this.$emit('radioChanged', chartType, position)
      }
    },
    mounted () {
    },
    components: {},
    watch: {
      'pieData.top.data': function (val) {
        this.initChart('topPieChart', val, '到发车数占比')
      },
      'pieData.btm.data': function (val) {
        this.initChart('bottomPieChart', val, '到发货量占比')
      },
      'property.height': function (val) {
        this.selfProps.act_height = val - this.selfProps.paddingValue * 2
        this.selfProps.cnt_height = this.selfProps.act_height - this.selfProps.paddingValue * 2
      },
      'property.width': function (val) {
        this.selfProps.act_width = val - this.selfProps.paddingValue * 2
        this.selfProps.cnt_width = this.selfProps.act_width - this.selfProps.paddingValue * 2
      }
    }
  }
</script>

<style scoped>
  .mainPanned {
    position: absolute;
  }

  .piePannel {
    position: absolute;
  }

  .piePannel .pieHeader {
    font-size: 14px;
    /*color: yellow;*/
    padding-bottom: 5px;
    line-height: 20px;
    border-bottom: 1px solid rgba(142, 233, 255, 0.30);
    background: -webkit-linear-gradient(top, #E2FBFF, #6BC2FF); /* 背景色渐变 */
    -webkit-background-clip: text; /* 规定背景的划分区域 */
    -webkit-text-fill-color: transparent; /* 防止字体颜色覆盖 */
  }

  .piePannel .pieRadio {
    height: 20px;
    text-align: right;
    right: 30px;
    padding: 10px 0;
    font-size: 12px;
  }

  .piePannel .pieRadio .ivu-radio-group .ivu-radio-group-item {
    background: #225D92;
    color: #4C95E1;
    border: #225D92 1px solid;
    box-shadow: none;
  }

  .piePannel .pieRadio .ivu-radio-group .ivu-radio-group-item:before {
    display: none;
  }

  .piePannel .pieRadio .ivu-radio-group .ivu-radio-group-item:after {
    display: none;
  }

  .piePannel .pieRadio .ivu-radio-group .ivu-radio-wrapper-checked {
    background: #093052;
  }

  .piePannel .pieRadio .ivu-radio-group .ivu-radio-wrapper-checked:before {
    display: none;
  }

  .piePannel .pieRadio .ivu-radio-group .ivu-radio-wrapper-checked:after {
    display: none;
  }

  .piePannel .pieChartDraw .pieDrawed {
    width: 400px;
    height: 300px;
    margin: 0 auto 0 auto;
    z-index: 500;
  }

  /* 背景 */
  .chartBackgroundCustom {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .chartBackgroundCustom .chartMainPannel {
    width: 100%;
    background: #0c304a;
  }

  .chartBackgroundCustom .chartDiamondBottom {
    width: 100%;
  }

  .chartBackgroundCustom .chartDiamondBottom .chartDiamondBottomDiamond {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 210;
    border-top: 30px solid #0c304a;
    border-left: 30px solid transparent;
    height: 0;
    width: 100%;
  }

  .chartBackgroundCustom .chartDiamondBottom .chartDiamondBottomPannel {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 220;
    background: #0c304a;
  }

  .chartBackgroundCustom .frameBorderBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: 34px;
    height: 34px;
    background: url("../../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  /*边框*/
  .chartBackgroundCustom .borderTop {
    border-top-width: 1px;
    border-top-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    position: absolute;
    z-index: 250;
    top: 0;
    left: 0;
  }

  .chartBackgroundCustom .borderLeft {
    border-left-width: 1px;
    border-left-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    position: absolute;
    z-index: 250;
    top: 0;
    left: 0;
  }

  .chartBackgroundCustom .borderRight {
    border-right-width: 1px;
    border-right-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    position: absolute;
    z-index: 250;
    bottom: 0;
    right: 0;
  }

  .chartBackgroundCustom .borderBottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    position: absolute;
    z-index: 250;
    bottom: 0;
    right: 0;
  }

</style>
